<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城重制版</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/basic.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="icon" href="../img/favicon.ico">
</head>
<body>
    <div class="top-nav-wrapper">
        <div class="top-nav w clearfix">
            <ul class="mi-items">
                <li><a href="#">小米商城</a></li>
                <li class="line"></li>

                <li><a href="#">MIUI</a></li>
                <li class="line"></li>

                <li><a href="#">loT</a></li>
                <li class="line"></li>

                <li><a href="#">云服务</a></li>
                <li class="line"></li>

                <li><a href="#">金融</a></li>
                <li class="line"></li>
                
                <li><a href="#">有品</a></li>
                <li class="line"></li>

                <li><a href="#">小爱开发平台</a></li>
                <li class="line"></li>

                <li><a href="#">企业团购</a></li>
                <li class="line"></li>

                <li><a href="#">资质证照</a></li>
                <li class="line"></li>

                <li><a href="#">协议规则</a></li>
                <li class="line"></li>

                <!-- 注意下面的这个li没有设置宽度的  它里面不仅有一个超链接还有一个下拉框
                因为没有设置宽度，所以下面的下拉框会把li的宽度撑开 所以要让下拉框脱离文档流 -->
                <li class="qrcode">             
                    <a href="#">下载app</a>
                    <div class="download clearfix">
                        <a href="#">
                            <img src="../img/download.png" alt="">
                             <span>小米商城app</span>                        
                        </a>
                    </div>
                </li>

                <li class="line"></li>
                <li><a href="#">Select Location</a></li>
            </ul>

            <div class="shopping-cart">
                <a href="#">
                    <i class="iconfont icon-icon8"></i>
                    购物车(0)
                </a>
                <div class="cart-info">
                </div>
            </div>

            <ul class="user">
                <li><a href="#">登录</a></li>
                <li class="line"></li>
                <li><a href="#">注册</a></li>
                <li class="line"></li>
                <li><a href="#">消息通知</a></li>
            </ul>
        </div>
    </div>
    <div class="mid-nav-wrapper">
        <div class="mid-nav w clearfix">
            <div class="logo" title="小米">
               <a href="#" class="mi-logo"></a>
               <a href="#" class="mi-home"></a>
            </div>

            <ul class="product">
                <li><a href="#">全部产品分类</a></li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
    </div>
</body>
</html>